import { useEffect, useMemo, useState } from "react"
import MemoVsCallback from "./MemoVsCallback"

const MemoAndCallbackDemo=()=>{
    const [count,setCount]=useState(0)
    useEffect(()=>{
        console.log('onMount/onUpdate')
        return()=>{
            console.log('onUnmount')
        }
    })
    const [words,setWords]= useState(['hello','word','你好'])
    const computWordCount=(words)=>{
        let i=0
        while(i<10**9) i++;
        return words.length
    }
    const wordCount= useMemo(()=>{ return computWordCount(words)},[words,count])
 return(
     <>
     <div>
         词语个数:{wordCount}
         <button onClick={()=>setCount(count+1)}>add:{count}</button>
         <button onClick={()=>setCount(count-1)}>sub:{count}</button>
      <MemoVsCallback/>
     </div> 
     </>

 )
}
export default MemoAndCallbackDemo